<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>抽奖</title>
        <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background: rgb(246, 246, 246);
        }
        #turntable{
            width: 415px;
            margin: 120px auto 0;
            position: relative;
        }
        /* #zhuanpan{
            
        } */
        #pointer{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-63%);
        }
        input{
            position: absolute;
            transform: translateX(-50%) translateY(200%);
            left: 50%;
            bottom: 0;
            width: 170px;
            height: 40px;
            line-height: 40px;
            border: 1px solid gold;
            border-radius: 30px;
            background-color: #ff9cff; 
            font-size: 30px;
            font-family:cursive;
            font-weight: 800;
            
        }
        @keyframes turn{
            from{
                transform: rotate(var(--first));
            }
            to{
                transform: rotate(var(--last));
            }
        }
    </style>
    <body>
        <div id="turntable">
            <img src="img/zhuanpan.jpg" alt="" id="zhuanpan">
            <img src="img/pointer.png" alt="" id="pointer">
            <input type="button" value="冲鸭" id="input">
        </div>
        <script>
            window.onload=function(){
                var input=document.getElementById('input')
                var zhuanpan=document.getElementById('zhuanpan')
                input.onmouseenter=function(){
                    input.style.background='#d886d8'
                }
                input.onmouseleave=function(){
                    input.style.background='#ff9cff'
                }
                input.onmousedown=function(){
                    input.style.background='#b36fb3'
                }
                input.onmouseup=function(){
                    var n=0;
                    input.style.background='#d886d8'
                    zhuanpan.style.transform='rotate(0deg)'
                    timer=setInterval(function(){
                        var num=Math.floor(Math.random()*13)//随机生成整形数字取值在0-12 
                        last=num*30+720//转盘每一个奖品都在30度以上并且至少两圈起步
                        n+=30
                        if(n>=last){
                            clearInterval(timer)
                        }
                        zhuanpan.style.transform='rotate('+n+'deg)'
                    },100)
                }
            }
            // $(function(){
            //     var input=$('input');
            //     var first=0;//计数用的
            //     var count=0;//也是计数用的，计算点击次数
            //     var last=0;
            //     input.mouseenter(function(){//鼠标移入
            //         $('input').css('background-color','#d886d8')
            //     })
            //     input.mouseleave(function(){//鼠标移出
            //         $('input').css('background-color','#ff9cff')
            //     })
            //     input.mousedown(function(){//鼠标点击
            //         $('input').css('background-color','#b36fb3')
            //         $('#zhuanpan').removeAttr("style","none")
            //         $('#zhuanpan').css('transform','rotateZ('+first+'deg)')//
            //     })
            //     input.mouseup(function(){//鼠标点击完成
            //         count=count+1;//点一下加一次 1
            //         var num=Math.floor(Math.random()*13)//随机生成整形数字取值在0-12 
            //         $('input').css('background-color','#d886d8')
            //         last+=num*30//转盘每一个奖品都在30度以上 780+60=840
            //         last=last+720;//保证至少旋转两圈起步 780
            //         $('#zhuanpan').css('--frist',first+'deg')//0
            //         first=first+last;//780
            //         $('#zhuanpan').css('--last',last+'deg')//780
            //         $('#zhuanpan').css('animation','turn 5s')
            //         $('#zhuanpan').css('transform','rotateZ('+first+'deg)')//
            //         var deg=720*count
            //         console.log("deg="+deg)
            //         if(first-deg>360){//如果..说不出来反正结果对了就是了
            //             first=first-360
            //         }
            //         var prize=(first-deg)/30//听名知其意 奖品的度数
            //         console.log(prize)
            //         switch(prize){
            //             case 12:alert('恭喜你获得大奖iPad Air');
            //             break;
            //             case 1:alert('恭喜你获得1个七度币');
            //             break;
            //             case 2:alert('恭喜你获得大奖Galaxy Gear');
            //             break;
            //             case 3:alert('恭喜你获得大奖Emie移动电源');
            //             break;
            //             case 4:alert('抽了个寂寞');
            //             break;
            //             case 5:alert('恭喜你获得大奖大礼包(月度)我也不知道是什么');
            //             break;
            //             case 6:alert('恭喜你获得1个七度币');
            //             break;
            //             case 7:alert('恭喜你获得1个七度币');
            //             break;
            //             case 8:alert('恭喜你获得大礼包(半年)我也不知道是什么');
            //             break;
            //             case 9:alert('恭喜你获得1个七度币');
            //             break;
            //             case 10:alert('恭喜你获得大奖照片打印机');
            //             break;
            //             case 11:alert('抽了个寂寞');
            //             break;
            //         }
            //     })
            // })
        </script>
    </body>
</html>